<template>
  <a-row :gutter="20" style="margin-bottom: 20px;">
    <a-col :span="6">
      <a-card hoverable title="当前时间" style="text-align: center">


          <a-statistic
              :value="formattedTime"
          >
            <template #prefix>
              <AlertOutlined />
            </template>
          </a-statistic>


        <a-card-meta >
          <template #description>注意时间管理哦 多喝热水！！</template>
        </a-card-meta>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card hoverable title="网站学生总数" style="text-align: center">
        <a-statistic
            :value="studentUsers"
            suffix="人"
        >
          <template #prefix>
            <TeamOutlined />
          </template>
        </a-statistic>

        <a-card-meta>
          <template #description>{{studentUsers<=10?'学生太少是都不爱学习吗！':'学生太多，请多多教导！'}}</template>
        </a-card-meta>
      </a-card>
    </a-col>
    <a-col :span="6">
      <a-card hoverable title="网站老师总数" style="text-align: center">
        <a-statistic
            :value="teacherUsers"
            suffix="人"
        >
          <template #prefix>
            <UsergroupAddOutlined />
          </template>

        </a-statistic>
        <a-card-meta >
          <template #description>{{teacherUsers<=10?'老师太少请多多推荐给老师！':'感谢你的贡献！'}}</template>
        </a-card-meta>
      </a-card>
    </a-col>
    <a-col   :span="6">
      <a-card hoverable  title="网站课程总数" style="text-align: center">
        <a-statistic
            :value="courseData"
            suffix="个课程"
        >
          <template #prefix>
            <ReadOutlined />
          </template>
        </a-statistic>
        <a-card-meta >
          <template #description>{{courseData<=10?'课程太少请多多发布课程！':''}}</template>
        </a-card-meta>
      </a-card>
    </a-col>
  </a-row>
  <a-row  :gutter="20" style="margin-bottom: 20px;">
    <a-col   :span="18">
      <a-card hoverable>
        <CourseCategoryChart></CourseCategoryChart>
      </a-card>
    </a-col>
    <a-col   :span="6">
      <a-card hoverable>
        <CategoriesData></CategoriesData>
      </a-card>
    </a-col>
  </a-row>
  <a-row :gutter="20" style="margin-bottom: 20px;">
    <a-col   :span="7">
      <a-card hoverable title="网站评论" >
        <a-timeline>
          <a-timeline-item
              v-for="(comment, index) in comments"
              :key="comment.commentId"
              :color="['red', 'green', 'blue', 'purple'][index % 4]">
              <a-comment :author="comment.username" :avatar="comment.avatar" >
                <template #actions>
                  <span >{{comment.courseName}}</span>
                </template>

                <template #content>
                  <p style="margin: 0; line-height: 1.5;">{{ comment.content }}</p>
                </template>
                <template #datetime>
                  <a-tooltip>
                    <span style="font-size: 12px; color: #999;">{{ comment.createdAt }}</span>
                  </a-tooltip>
                </template>

              </a-comment>

          </a-timeline-item>
        </a-timeline>



      </a-card>
    </a-col>
    <a-col :span="17">
      <a-card hoverable>
        <PerformanceChart />
      </a-card>

    </a-col>


    <a-col hoverable  :span="7">
      <a-card>

      </a-card>
    </a-col>
  </a-row>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { TeamOutlined ,AlertOutlined,UsergroupAddOutlined,ReadOutlined} from '@ant-design/icons-vue';
import {getUsers} from "@/apis/user.js";
import CourseCategoryChart from "@/views/echar/CourseCategoryChart.vue";
import CategoriesData from "@/views/echar/CategoriesData.vue";
import {getAllCourses} from "@/apis/course.js";
import {getCommentsList} from "@/apis/comment.js";
import PerformanceChart from "@/views/echar/PerformanceChart.vue";

const currentTime = ref(Date.now())
const formattedTime = ref('')
function formatTime(value) {
  const date = new Date(value)
  const year = date.getFullYear() + '/'
  const month = (date.getMonth() + 1).toString().padStart(2, '0') + '/'
  const day = date.getDate().toString().padStart(2, '0') + ''
  const hours = date.getHours().toString().padStart(2, '0') + ':'
  const minutes = date.getMinutes().toString().padStart(2, '0') + ':'
  const seconds = date.getSeconds().toString().padStart(2, '0') + ''

  return `${year}${month}${day}   ${hours}${minutes}${seconds}`
}
onMounted(() => {
  const intervalId = setInterval(() => {
    currentTime.value = Date.now()
    formattedTime.value = formatTime(currentTime.value)
  }, 1000)

  // 清除定时器
  onUnmounted(() => {
    clearInterval(intervalId)
  })
})

const studentUsers = ref(0)
const teacherUsers= ref(0)
const user=ref([])

const Users =async () => {
  const res =await getUsers()
  user.value = res.data
  for (let i = 0; i < user.value.length; i++){
    const userInfo = user.value[i]; // 获取当前用户对象
    if (userInfo.userType === 'student'){
      studentUsers.value += 1
    }else {
      teacherUsers.value += 1
    }
  }
}
onMounted(()=>{
  Users()
})

const courseData=ref(0)
const course=ref([])
const courseList=ref([])
const allCourses =async () => {
  const res=await getAllCourses()
  course.value = res.data
  console.log(course.value)
  for (let i = 0; i < course.value.length; i++){
    let courseInfo =course.value[i]
    for (let j = 0; j < courseInfo.coursesList.length; j++){
      courseList.value.push(courseInfo.coursesList[j])
    }
    courseData.value+=courseInfo.coursesList.length
  }
}
onMounted(()=>{
  allCourses()
})

const comments=ref([])
const getComments=async () => {
  const res=await getCommentsList()
  comments.value = res.data
}
onMounted(()=>{
  getComments()
})
</script>

<style scoped>
/* 你可以在这里添加任何需要的样式 */
</style>
